import { RefObject, useEffect } from "react";


function useClickOutside(ref: RefObject<HTMLElement>, handler: Function) { 

  useEffect(() => {
    const listener = (event: MouseEvent) => {
      if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
        return
      }

      handler(event)
    }
    document.addEventListener('click', listener)
    
    return () => {
      document.removeEventListener('click',listener)
    }
  },[ref,handler])
}

export default useClickOutside